
 <!-- <!DOCTYPE html> -->
<html>
<head>
	<title></title>
</head>
<!--??是类似于forEach() 
	var arr = [1,2,3,4,5,6]
	arr.every/some(function(a,b){
	 return a>3;
	 // false/ true
	})
every：每一个都符合
some：有一项符合

 -->
<body>
	<h1>图书管理系统</h1>
	<div>
		书名：<input type="text" id="bookname" value="123123">
		<button id="addBtn">增加</button>
	</div>
	<ul id="booklist"></ul>
<script type="text/javascript">
	var btn = document.getElementById("addBtn");
	var book = document.getElementById("bookname");
	var booklist = document.getElementById("booklist");

	btn.addEventListener("click",function(){
		var b_value=book.value;//value的值 是input里面添加的数
		   
		bookArr.unshift({bookName:b_value});//增加数组
		console.log(bookArr);
		var li =document.createElement("li");
		li.innerHTML="<span>"+b_value+"</span>";
		booklist.insertBefore(li,booklist.firstChild);//注意是两个参数
	})
/*    
1.显示书籍列表
-遍历数组
-完成dom结构(render)

2.点击添加按钮，把input里面的内容添加到bookArr里面去
-点击事件
-获取input内容
-数组增加元素
-dom结构，增加
-<button onClick="abc()" onClick="xyz()"><button>
btn.onclick = function(){}
btn.addEventListener()
行为，结构，表现互相分离
 */


// function an(ele){
// 	return document.querySelectorAll(ele);
// }
//数组元素格式{bookName:"javascript权威指南"}
var bookArr = [];
function init(arr){
for (var i = 0; i < arr.length; i++) {
	var li = document.createElement("li");
	//li.innerHTML ="<span>"+arr[i].bookName+"</span>" 
	// an("#booklist")[0].appendChild(li);
}
}
init(bookArr);

var oli =document.getElementsByTagName("li");
var arr = [1,2,3,4,5];
arr.forEach(function(shu,xiang,zu){
	// console.log(shu,xiang);
	zu[xiang]=shu+1
})
console.log(arr)
var arr = [1,2,3,4,5,6]
	
console.log(arr.every(function(a,b){
	 return a>3;
	 // false/ true
	}))
</script>	
</body>
</html>
-->

<!-- <!DOCTYPE html>
<html>
<head>
	<title>自己练习的</title>
</head>
<body>
	<input type="" name="" id="input" value="123">
	<button id="btn">点击</button>
	<ul id="ul"></ul>
	<p id="p"></p>

</body>
<script type="text/javascript">
var input = document.getElementById("input");
var ul = document.getElementById("ul");
var btn = document.getElementById("btn");
 function a(ccc){
	return b = document.querySelectorAll(ccc);
}
a("#p");
console.log(b);
	//var li = document.createElement("li");获取在全局的时候只能使用一次，有固定值
	//在局部变量中可以重复调用
 //var text = input.value
 //var arr = [];
 //	arr.push(input.value);
 //	console.log(arr);
 var arr = [];
 btn.addEventListener("click",function(){
	var li = document.createElement("li");//放的位置dom使用是一个
	//注意前面要加document 还有Element别写错了
 	arr.push(input.value);
 	console.log(arr);
	var text = input.value; //存放问题 在外面会先获取input标签里的value内容 有就有没有就没有 还不能改变 在里面会后获取 随着变化而变化 下面的添加一样
	
	li.innerHTML = "<span>"+text+"</span>";
	ul.appendChild(li);
})
//返回干什么的 return
</script>
</html> -->
